<template>
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
  
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :where="where"
          :datasource="url"
          :columns="columns"
          :selection.sync="selection"
          height="calc(100vh - 315px)"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit(null)"
              >添加
            </el-button>
          </template>
          <template slot="icon" slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.icon"
              fit="fit"
            ></el-image>
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openEdit(row)"
              >修改
            </el-link>
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openMerchantEdit(row)"
              >广告模版
            </el-link>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <PaywayEdit :data="current" :visible.sync="showEdit" @done="reload" />
      <MerchantEdit
        v-if="showMerchantEdit"
        :data="current"
        :visible.sync="showMerchantEdit"
        @done="reload"
      />
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import PaywayEdit from './payway-edit'
  import MerchantEdit from './Merchant-edit.vue'
  
  export default {
    name: 'ExamPaymentAccount',
    components: { PaywayEdit, MerchantEdit },
    computed: {
      ...mapGetters(['permission'])
    },
    data() {
      return {
        // 表格数据接口
        url: '/Packageadplatform/index',
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'code',
            label: '广告标识',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '平台名称',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'create_time',
            label: '创建时间', 
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row, column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action'
          }
        ],
        // 表格搜索条件
        where: {},
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        showMerchantEdit: false
      }
    },
    methods: {
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload({ where: this.where })
      },
      /* 重置搜索 */
      reset() {
        this.where = {}
        this.reload()
      },
      /* 显示编辑 */
      openEdit(row) {
        this.current = row
        this.showEdit = true
      },
      openMerchantEdit(row) {
        this.current = row
        this.showMerchantEdit = true
      }
  
      /* 批量删除 */
    }
  }
  </script>
  
  <style scoped>
  .params-cell {
    height: auto;
    max-height: 150px;
    overflow: auto;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
  </style>
  